<template>
    <view class="my_bonus">
        <view class="bonus_wrap">
            <view class="bonus_header row">
                <u-icon
                    name="arrow-up-fill"
                    @click="prevMonth"
                    color="#FF0000"
                    size="16"
                ></u-icon>
                <span>{{ month }}</span>
                <u-icon
                    name="arrow-down-fill"
                    @click="nextMonth"
                    color="#FF0000"
                    size="16"
                ></u-icon>
            </view>
            <div class="days row">
                <div
                    v-for="(item, index) in markedNumbers"
                    :key="index"
                    :style="{ color: item.marked ? '#FF3C15' : '#808080' }"
                >
                    {{ item.value }}
                </div>
            </div>
            <div class="days_success" v-if="full == 1">
                <u-icon
                    name="checkbox-mark"
                    color="#FF947F"
                    size="200"
                ></u-icon>
            </div>
        </view>
        <view class="bonus_money">
            <view class="money_top row">
                <span>{{
                    full == 1 ? "full attendance!" : "Not fully present"
                }}</span>
                <font v-if="full == 1"
                    >Get an additional {{ additional }} egp!</font
                >
                <font v-else>absent for three days</font>
            </view>
            <view class="money_bottom row">
                <image src="/static/win.png" mode=""></image>
                <span
                    >win <font>{{ money }}</font> EGP</span
                >
            </view>
        </view>
    </view>
</template>

<script>
import { getTodayDate } from "@/utils/utils";
import { getSignList } from "@/lib/service.js";
export default {
    data() {
        return {
            month: "",
            signList: [],
            full: 0,
            money: "0",
            additional: "0",
            days: [],
            markedNumbers: [],
        };
    },
    onLoad() {
        const dateStr = getTodayDate();
        const [year, month, day] = dateStr.split("-");
        this.month = `${year}-${month}`;
        this.generateDays();
        this.handleSign();
    },
    methods: {
        handleSign() {
            getSignList({
                month: this.month,
            })
                .then((res) => {
                    if (res.statusCode == 0) {
                        this.signList = res.data.list;
                        this.money = res.data.money;
                        this.full = res.data.full;
                        this.markNumbers();
                        this.additional = res.data.additional || "0";
                    }
                })
                .catch((err) => {
                    console.log(err, "sdsdsds");
                });
        },
        markNumbers() {
            const dateMap = this.signList.reduce((acc, item) => {
                const day = new Date(item.date).getDate();
                acc[day] = item.state;
                return acc;
            }, {});

            this.markedNumbers = this.days.map((number) => ({
                value: number,
                marked: dateMap[number] === 1,
            }));
            console.log("markedNumbers", this.markedNumbers);
        },
        nextMonth() {
            const [year, month] = this.month.split("-");
            const newMonth = (parseInt(month, 10) + 1) % 12 || 12; // 使用模运算确保月份在1到12之间循环
            const newYear = newMonth === 12 ? parseInt(year, 10) + 1 : year; // 年份调整逻辑保持不变，但更简洁了。
            this.month = `${newYear}-${String(newMonth).padStart(2, "0")}`;
            this.generateDays();
            this.handleSign();
        },
        prevMonth() {
            const [year, month, day] = this.month.split("-");
            const newMonth = (parseInt(month, 10) - 1 + 12) % 12 || 12; // 使用模运算确保月份在1到12之间循环，并处理负数情况。
            const newYear = newMonth === 12 ? parseInt(year, 10) - 1 : year; // 年份调整逻辑保持不变，但更简洁了。
            this.month = `${newYear}-${String(newMonth).padStart(2, "0")}`;
            this.generateDays();
            this.handleSign();
        },
        generateDays() {
            const [year, month] = this.month.split("-");
            const daysInMonth = new Date(year, month + 1, 0).getDate(); // 获取当前月份的天数
            this.days = [];
            for (let i = 1; i <= daysInMonth; i++) {
                this.days.push(i);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.bonus_wrap {
    margin: 30rpx 34rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    padding-bottom: 56rpx;
    position: relative;
    .days_success {
        position: absolute;
        top: 10%;
        left: 22%;
        z-index: 99;
    }

    .bonus_header {
        padding-top: 34rpx;
        justify-content: center;

        span {
            display: inline-block;
            padding: 0 20rpx;
        }
    }
    .days {
        flex-wrap: wrap;
        div {
            width: 13.8%;
            text-align: center;
            margin-top: 44rpx;
            color: #808080;
        }
    }
}
.bonus_money {
    margin: 0 34rpx;
    background: #f4f4f4;
    border-radius: 40rpx;
    padding: 32rpx 30rpx;
    .money_top {
        justify-content: space-between;
        font {
            color: #a0a0a0;
            font-size: 26rpx;
        }
    }
    .money_bottom {
        margin-top: 24rpx;
        image {
            width: 30rpx;
            height: 34rpx;
        }
        span {
            display: inline-block;
            padding-left: 20rpx;
            font-weight: 600;
            color: #ff3c15;
            font-size: 32rpx;
            font {
                padding: 0 12rpx;
            }
        }
    }
}
</style>
